import React, { Component } from 'react';
import {StyleSheet, Text, View, TouchableOpacity, Image, FlatList, StatusBar, TextInput, ScrollView, DeviceEventEmitter} from 'react-native';
import { base } from "../../../assets/style";
import {DeviceStorage} from "../../../utils/DeviceStorage";
import { getUserInfo } from "../../../utils/login";
import {i18n} from "../../../utils/locales/i18n";

type Props = {};
export default class Account extends Component<Props> {
    static navigationOptions = ({ navigation }) => {
        return {
            title: i18n.t('i56'),
            headerStyle: {
            },
            headerTintColor: '#0f0f0f',
            headerBackTitle: null
        }
    };
    constructor() {
        super();
        this.state = {
            userInfo: {
                AreCode: "",
                AssPass: false,
                BankInfo: null,
                Email: "",
                GoogleAuth: "",
                GoogleOpen: 0,
                HadAd: 0,
                Kyc: 0,
                Name: "",
                Phone: "",
                TxFail: 0,
                TxSuc: 0,
                Username: "---"
            },
            refresh: 1
        }
    }
    componentDidMount(): void {
        this._getUserInfo()
        DeviceEventEmitter.addListener('refresh_user_info', () => {
            this._getUserInfo()
        })
    }
    _getUserInfo = async () => {
        await getUserInfo()
        const userInfoJson = await DeviceStorage.get('user_info')
        this.setState({
            userInfo: JSON.parse(userInfoJson)
        })
    }

    render() {
        return (
            <View style={[base.flex_1, base.bg_gray]}>
                <View style={[base.bg_white, base.content_container]}>
                    {/*setting item*/}
                    <View style={[base.flex_row_start, { height: 50, borderBottomWidth: 1, borderBottomColor: '#eee' }]}>
                        <View style={[base.flex_row_start, { width: 100 }]}>
                            <Image resizeMode={'contain'} style={{width: 15, height: 15}} source={require('../../../images/mine/icon_mail.png')}/>
                            <View style={{ marginLeft: 10 }}>
                                <Text style={{ color: '#0f0f0f', fontSize: 14 }}>{i18n.t('i57')}</Text>
                            </View>
                        </View>
                        { this.state.userInfo.Email ? (
                            <TouchableOpacity style={[base.flex_row_end, {flex: 1, height: '100%'}]}>
                                <View style={{ paddingRight: 10 }}>
                                    <Text style={base.color_gray}>{i18n.t('i58')}</Text>
                                </View>
                                <Image width={10} height={10} source={require('../../../images/mine/left-arrow.png')}/>
                            </TouchableOpacity>
                        ) : (
                            <TouchableOpacity onPress={() => {this.props.navigation.navigate('VerifyEmail')}} style={[base.flex_row_end, {flex: 1, height: '100%'}]}>
                                <View style={{ paddingRight: 10 }}>
                                    <Text style={base.color_gray}>{i18n.t('i59')}</Text>
                                </View>
                                <Image width={10} height={10} source={require('../../../images/mine/left-arrow.png')}/>
                            </TouchableOpacity>
                        ) }

                    </View>
                    <View style={[base.flex_row_start, { height: 50, borderBottomWidth: 1, borderBottomColor: '#eee' }]}>
                        <View style={[base.flex_row_start, { width: 100 }]}>
                            <Image resizeMode={'contain'} style={{width: 15, height: 15}} source={require('../../../images/mine/icon_phone.png')}/>
                            <View style={{ marginLeft: 10 }}>
                                <Text style={{ color: '#0f0f0f', fontSize: 14 }}>{i18n.t('i60')}</Text>
                            </View>
                        </View>
                        { this.state.userInfo.Phone ? (
                            <TouchableOpacity style={[base.flex_row_end, {flex: 1, height: '100%'}]}>
                                <View style={{ paddingRight: 10 }}>
                                    <Text style={base.color_gray}>{i18n.t('i58')}</Text>
                                </View>
                                <Image width={10} height={10} source={require('../../../images/mine/left-arrow.png')}/>
                            </TouchableOpacity>
                        ) : (
                            <TouchableOpacity onPress={() => this.props.navigation.navigate('VerifyPhone')} style={[base.flex_row_end, {flex: 1, height: '100%'}]}>
                                <View style={{ paddingRight: 10 }}>
                                    <Text style={base.color_gray}>{i18n.t('i59')}</Text>
                                </View>
                                <Image width={10} height={10} source={require('../../../images/mine/left-arrow.png')}/>
                            </TouchableOpacity>
                        ) }
                    </View>
                    <View style={[base.flex_row_start, { height: 50, borderBottomWidth: 1, borderBottomColor: '#eee' }]}>
                        <View style={[base.flex_row_start, { width: 100 }]}>
                            <Image resizeMode={'contain'} style={{width: 15, height: 15}} source={require('../../../images/mine/icon_google_code.png')}/>
                            <View style={{ marginLeft: 10 }}>
                                <Text style={{ color: '#0f0f0f', fontSize: 14 }}>{i18n.t('i61')}</Text>
                            </View>
                        </View>
                        { this.state.userInfo.GoogleOpen ? (
                            <TouchableOpacity style={[base.flex_row_end, {flex: 1, height: '100%'}]}>
                                <View style={{ paddingRight: 10 }}>
                                    <Text style={base.color_gray}>{i18n.t('i58')}</Text>
                                </View>
                                <Image width={10} height={10} source={require('../../../images/mine/left-arrow.png')}/>
                            </TouchableOpacity>
                        ) : (
                            <TouchableOpacity onPress={() => this.props.navigation.navigate('VerifyGoogle')} style={[base.flex_row_end, {flex: 1, height: '100%'}]}>
                                <View style={{ paddingRight: 10 }}>
                                    <Text style={base.color_gray}>{i18n.t('i59')}</Text>
                                </View>
                                <Image width={10} height={10} source={require('../../../images/mine/left-arrow.png')}/>
                            </TouchableOpacity>
                        ) }
                    </View>
                </View>
                <View style={[base.bg_white, base.content_container, { marginTop: 10 }]}>
                    {/*setting item*/}
                    <View style={[base.flex_row_start, { height: 50, borderBottomWidth: 1, borderBottomColor: '#eee' }]}>
                        <View style={[base.flex_row_start, { width: 100 }]}>
                            <Image resizeMode={'contain'} style={{width: 15, height: 15}} source={require('../../../images/mine/icon_login_password.png')}/>
                            <View style={{ marginLeft: 10 }}>
                                <Text style={{ color: '#0f0f0f', fontSize: 14 }}>{i18n.t('i62')}</Text>
                            </View>
                        </View>
                        <TouchableOpacity onPress={() => this.props.navigation.navigate('ModifyPassword')} style={[base.flex_row_end, {flex: 1, height: '100%'}]}>
                            <View style={{ paddingRight: 10 }}>
                                <Text style={base.color_gray}>{i18n.t('i63')}</Text>
                            </View>
                            <Image width={10} height={10} source={require('../../../images/mine/left-arrow.png')}/>
                        </TouchableOpacity>
                    </View>
                    {/*<View style={[base.flex_row_start, { height: 50, borderBottomWidth: 1, borderBottomColor: '#eee' }]}>*/}
                        {/*<View style={[base.flex_row_start, { width: 100 }]}>*/}
                            {/*<Image resizeMode={'contain'} style={{width: 15, height: 15}} source={require('../../../images/mine/icon_assets_password.png')}/>*/}
                            {/*<View style={{ marginLeft: 10 }}>*/}
                                {/*<Text style={{ color: '#0f0f0f', fontSize: 14 }}>{i18n.t('i64')}</Text>*/}
                            {/*</View>*/}
                        {/*</View>*/}
                        {/*<TouchableOpacity onPress={() => this.props.navigation.navigate('ModifyAssets')} style={[base.flex_row_end, {flex: 1, height: '100%'}]}>*/}
                            {/*<View style={{ paddingRight: 10 }}>*/}
                                {/*<Text style={base.color_gray}>{ this.state.userInfo.AssPass ? i18n.t('i65') : i18n.t('i66') }</Text>*/}
                            {/*</View>*/}
                            {/*<Image width={10} height={10} source={require('../../../images/mine/left-arrow.png')}/>*/}
                        {/*</TouchableOpacity>*/}
                    {/*</View>*/}
                </View>
            </View>
        )
    }
}

const styles = StyleSheet.create({
});
